<template>
  <div class="achiev-container-padding">
    <div class="buttonList">
      <el-button>导出数据</el-button>
      <el-button type="primary" @click="edit">修改</el-button>
    </div>
    <el-descriptions title="" direction="vertical" :column="3" border>
      <el-descriptions-item label="记录ID" align="center">
        {{ formInline.id }}
      </el-descriptions-item>
      <el-descriptions-item label="记录创建人" align="center">
        {{ formInline.creator }}
      </el-descriptions-item>
      <el-descriptions-item label="记录创建时间" align="center">
        {{ dayjs(formInline.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="margin-top20 margin-bottom20"
      title="其他信息"
      direction="vertical"
      :column="4"
      border
    >
      <el-descriptions-item label="成果名称" align="center">
        {{ formInline.achievementName }}
      </el-descriptions-item>
      <el-descriptions-item label="完成单位" align="center">
        {{ formInline.reportUnitName }}
      </el-descriptions-item>
      <el-descriptions-item label="上报单位" align="center">
        {{ formInline.completeUnitList }}
      </el-descriptions-item>
      <el-descriptions-item label="上报人" align="center">
        aa
      </el-descriptions-item>
    </el-descriptions>
    <div class="sq">
      <span>鉴定申请表:</span>
      <div
        v-for="(item, index) in formInline.identifyApplyDoc"
        :key="index"
        class="applyList"
      >
        <el-link
          :href="item.url"
          type="primary"
          target="_blank"
          style="margin-right: 10px"
        >
          {{ item.name }}
        </el-link>
      </div>
    </div>
    <el-divider />
    <el-descriptions
      class="margin-top20 margin-bottom20"
      title="材料"
      direction="vertical"
      :column="2"
      border
    >
      <el-descriptions-item
        v-for="(item, index) in formlist"
        :key="index"
        :label="item.label"
        align="left"
      >
        <div v-for="j in formInline[item.prop]" :key="j.id" class="applyList">
          <el-link
            :href="j.url"
            type="primary"
            target="_blank"
            style="margin-right: 10px"
          >
            {{ j.name }}
          </el-link>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { companyForm, tianjingForm } from '../table/column'
  import { useRoute } from 'vue-router'
  import { getAchievementInfo } from '@/api/achievementAppraisal'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'
  import dayjs from 'dayjs'
  import { useDictStore } from '@/store/modules/dict'
  const { closeTabNavigate } = useCloseTabNavigate()
  const dictStore = useDictStore()
  const achievementUplist = dictStore.getDictType(
    'technology_achievement_file_type'
  )
  const route = useRoute()
  const id = ref()
  const getType = ref()
  const formlist = computed(() => {
    // type ===1 ,集团
    const formList =
      route.query.type === '1' ? companyForm.value : tianjingForm.value
    achievementUplist.forEach((item) => {
      formList.forEach((item2) => {
        if (item2.label.indexOf(item.label) > -1) {
          item2.prop = item.value
        }
      })
    })
    return formList
  })

  const isEdit = ref(false)
  const formInline = ref({})

  const save = () => {
    isEdit.value = false
  }
  const edit = () => {
    closeTabNavigate({
      name: 'achievementAppraisalAdd',
      query: { id: id.value, getType: getType.value },
    })
  }

  const getInfo = () => {
    const params = {
      id: id.value,
      getType: getType.value,
    }
    getAchievementInfo(params).then((res) => {
      const data = res.data
      try {
        formInline.value = Object.assign({}, data)
        formInline.value.identifyApplyDoc = JSON.parse(data?.identifyApplyDoc)
        formInline.value.uploadDocs = JSON.parse(data?.uploadDocs)
        formInline.value = Object.assign(
          formInline.value,
          ...formInline.value.uploadDocs
        )
      } catch (error) {
        console.log(error)
      }
    })
  }

  onMounted(() => {
    id.value = route.query.id
    getType.value = route.query.getType ?? 2
    getInfo()
  })
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;

  .sq {
    margin-bottom: $margin-bottom;
  }

  .margin-top20 {
    margin-top: $margin-bottom;
  }

  .margin-bottom20 {
    margin-bottom: $margin-bottom;
  }

  .buttonList {
    display: flex;
    justify-content: end;
    padding-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
    margin-bottom: $margin-bottom;
  }

  .title {
    border-radius: 2px;
    border-left: 5px solid #1890ff;
    height: 28px;
    background: #f7f8f9;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    padding-left: 12px;
    line-height: 28px;
    // margin-bottom: $margin-bottom;
  }

  .form-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;

    :deep(.el-form-item) {
      margin-right: 0;
    }
  }

  .inventor {
    p {
      text-align: left;
    }

    text-align: center;
  }

  .applyList {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
</style>
